<template>
	<div class="bg-white">

		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>客户详细信息</span>
			</div>
			<div :style="" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">客户编号</div>
							<div class="text-xss">{{client.clientid}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-f-fuguang rounded  p-2">
							<div class="text-xs">客户</div>
							<div class="p-2 d-flex">
								<div class="w-25 position-relative">
									<div class="padding-top-100">
									</div>
									<img class="w-100 h-100 position-absolute top0 rounded-circle" :src="client.heading"/>
								</div>
								<div class="w-75">
									<div class="px-4">姓名：{{client.nc}}</div>
									<div class="px-4">年龄：{{client.age}}</div>
									<div class="px-4">性别：
										<span v-if="client.sex == '1'">男</span>
										<span v-if="client.sex == '2'">女</span>
									</div>
								</div>
								
							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">电话</div>
							<div>{{client.tel}}</div>
						</div>
						</Col>
						
		
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs text-danhong">押金</div>
							<div class="px-3">¥{{client.yj}}</div>
						</div>
						</Col>
					</Row>
				</div>
			</div>
		</div>

		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>充值记录</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(aclientcz,index) in aclientcz" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>充值ID</span>
							<span>{{aclientcz.czid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>充值时间</span>
							<span>{{aclientcz.ct}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>充值金额</span>
							<span>{{aclientcz.amount}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>支付状态</span>
							<span v-if="aclientcz.pflg == '1'">已支付</span>
							<span v-if="aclientcz.pflg == '0'">未支付</span>
						</div>
					</div>
					</Col>
					
				</Row>
			</div>
		</div>
 <div>
 	<Page class="text-right mt-3" :page-size="pageSize" @on-change="pageSearch"
 		:total="total" />
 </div>	

	</div>
</template>

<script>
	export default {
		data() {
			return {
				client: {
					clientid: "",
					openid: "",
					nc: "",
					sex: "",
					age: "",
					heading: "",
					from: "",
					tel: "",
					yj:"",
					hyjlid: ""
				},
				
				currentPage: 1,
				pageSize: 10,
				total: 0,
				aclientcz:[{
					czid:"",
					amount:"",
					ct:"",
					pflg:"",
				}],
			
			}
		},
		created: function() {
			this.client.clientid = this.$route.query.id;
			this.client.hyjlid = this.$route.query.hyjlid
			this.loadData();
			this.search();
		},
		mounted: function() {},
		
		methods: {
			
			
			loadData: function() {
				return this.http.get({
					url: "/client/hyjl/info",
					param: {
						clientid: this.client.clientid,
						hyjlid: this.client.hyjlid
					}
				}).then(res => {
					this.client = res.client;
					this.aclientcz = res.aclientcz;
					this.aclientcz = res.aclientcz;
					
				});
			},
			pageSearch: function(changedPage) {
				
				this.currentPage = changedPage;
				this.search();
			},
			
			search: function() {
				
				this.http.get({
					url: "/client/hyjl/info",
					param: {
						// 传一个当前页
						current: this.currentPage,
						size:this.pageSize,
						hyjlid: this.client.hyjlid
					}
				}).then(data => {
					
					this.aclientcz = data.aclientcz;
					this.currentPage = data.current;
					this.total = data.total;
					this.pageSize = data.size;
				});
			},
			
			
		},
	}
</script>

<style>
</style>